<template>
  <el-card shadow="always" :body-style="{ padding: '20px' }">
    <CommonCard title="累计用户数" :value="usersTotal!">
      <template #default>
        <v-chart :option="option()" autoresize></v-chart>
      </template>
      <template #bottom>
        <div>
          <span>日同比</span>
          <span>{{ userGrowthLastDay }}%</span>
          <span :style="{ marginLeft: '15px' }">月同比</span>
          <span>{{ userGrowthLastMonth }}%</span>
        </div>
      </template>
    </CommonCard>
  </el-card>
</template>

<script lang="ts">
import { computed, defineComponent } from "vue";

export default defineComponent({
  name: "TotalUsers",
});
</script>

<script setup lang="ts">
import CommonCard from "./CommonCard.vue";
import useReportDataStore from "@/stores/reportData";
const reportDataStore = useReportDataStore();

const usersTotal = computed(() => reportDataStore.reportData?.usersTotal);
const usersLastMonth = computed(
  () => reportDataStore.reportData?.usersLastMonth
);
const userGrowthLastDay = computed(
  () => reportDataStore.reportData?.userGrowthLastDay
);
const userGrowthLastMonth = computed(
  () => reportDataStore.reportData?.userGrowthLastMonth
);

const option = () => {
  return {
    xAxis: {
      type: "value",
      min: 0,
      max: usersTotal.value,
      show: false,
    },
    yAxis: {
      type: "category",
      show: false,
    },
    series: [
      {
        name: "用户增长量",
        type: "bar",
        data: [usersLastMonth.value],
        showBackground: true, //展示柱状图背景(最大值区域)
        backgroundStyle: {
          //背景颜色样式
          color: "#eee",
        },
        //柱的样式
        itemStyle: {
          color: "red",
        },
        //柱条上显示文字
        label: {
          show: true,
          formatter: "昨日访问量", //提示内容
          position: "right", //文字定位
          color: "yellowgreen",
        },
      },
    ],
    grid: {
      top: 0,
      bottom: 0,
      left: 0,
      right: 0,
    },
    tooltip: {
      trigger: "axis",
      position: function (point: any, _: any, __: any, ___: any, size: any) {
        let x = 0;
        const pointX = point[0];
        const toolWidth = size.contentSize[0];

        if (pointX > toolWidth) {
          x = pointX - toolWidth;
        } else {
          x = 5;
        }

        return [x, -40];
      },
    },
  };
};
</script>

<style scoped></style>
